<template>
  <div class="pad_10">
    <el-form ref="queryRef" :inline="true" label-width="68px">
      <el-form-item>
        <el-button @click="handleQuery">保存</el-button>
        <el-button @click="Cancel">取消</el-button>
      </el-form-item>
    </el-form>
    <el-divider />
    <SetUserSelect
      :key="keys"
      ref="setUserSelect"
      class="queryForm"
      :labelwidth="100"
      :isShowUserBtn="false"
      :buttonIsShow="false"
      :formData="bill"
      :queryParams="datas"
      @selChangeFun="changeFun"
    ></SetUserSelect>
    <el-divider style="margin-bottom: 20px" content-position="left">答案选项</el-divider>
    <VxeTableGrid
      :key="keyTimemin"
      style="height: 320px"
      :tableColumn="fieldDefinitionColumn"
      :tableLoading="tableLoading"
      :dataList="answerList"
      :showPagination="false"
      :paginationParams="paginationParams"
    >
    </VxeTableGrid>
  </div>
</template>
<script setup lang="tsx">
import { ref, getCurrentInstance, watch } from "vue";
import { drugList  } from "@/api/basicManagement/varietyMana";
import { addTopic, topicId, eitHtopic  } from "@/api/questionManag";
import data from "./data";
import { useRoute } from "vue-router";
import { json } from "stream/consumers";
const { bill, datas } = data;
datas.value = {
  status: '1',
  answerList: [],
}
const keyTimemin = ref(null);
let tableLoading = ref(false);
const { proxy } = getCurrentInstance();
let proxys: any = proxy;
const route: any = useRoute();
let keys = ref(0)
const { question_manag_kind, question_manag_status } = proxys.useDict("question_manag_kind", "question_manag_status");
const paginationParams = ref({
  total: 12,
  pageNum: 1,
  pageSize: 10,
});
watch(
  question_manag_kind,
  (newV, oldV) => {
    bill.value[1].selectData = question_manag_kind.value;
    keys.value = new Date().getTime();
  }
);
watch(
  question_manag_status,
  (newV, oldV) => {
    bill.value[3].selectData = question_manag_status.value;
    keys.value = new Date().getTime();
  }
);
const drugListFun = () => {
  drugList(paginationParams.value).then((res:any) => {
    res.rows?.forEach((val) => {
      val.value = val.id
      val.label = val.name
    })
    bill.value[4].selectData = res.rows
    keys.value = new Date().getTime();
  })
}
drugListFun()
const handleQuery = function (): void {
  proxys.$refs.setUserSelect.submitForm().then((valid:any) => {
    answerList.value.length && answerList.value.forEach((item) => {
      if(item.id && item.id.includes('row')){
        item.id = ''
      }
    })
    if (answerList.value.length == 0) {
      proxys.$modal.msgWarning('请添加答案选项')
      return
    }
    if (answerList.value.filter(item => (!item.type || !item.topic)).length > 0) {
      proxys.$modal.msgWarning('请把所有的题号跟描述填写完成')
      return
    }
    
    valid.answerList = answerList.value;
    (!route.query.id ? addTopic : eitHtopic)(valid).then(() => {
      proxys.$modal.msgSuccess(`${route.query.id ? "修改" : "新增"}成功`);
      Cancel();
    });
  });
};
route.query.id && topicId(route.query.id).then((res) => {
  res.data.status = ''+res.data.status
  datas.value = res.data
  answerList.value = res.data.answerList
})
const Cancel = () => {
  datas.value = {};
  const obj = { path: "/questionManag/questionManagList" };
  proxys.$tab.closeOpenPage(obj);
};
const changeFun = function (e: any): void {
  console.log(e);
};

// 输出
const fieldDefinitionColumn = ref([
  { type: 'seq', title: '序号', width: 60 },
  {
    field: "type",
    title: "题号",
    width: 100,
    slots: {
      default: ({ row }) => {
        return [<el-input v-model={row.type} placeholder="请输入题号" />];
      },
    },
  },
  {
    field: "topic",
    title: "描述",
    slots: {
      default: ({ row }) => {
        return [<el-input v-model={row.topic} placeholder="请输入描述" />];
      },
    },
  },
  {
    field: "isRight",
    title: "是否正确答案",
    width: 150,
    slots: {
      default: ({ row }) => {
        return [<el-switch
                v-model={row.isRight}
                inline-prompt
                active-value={1}
                inactive-value={0}
                active-text="是"
                inactive-text="否"
              />];
      },
    },
  },
  {
    title: "操作",
    children: [
      {
        width: 100,
        slots: {
          header: ({ row }) => {
            return [
              <div
                style="cursor: pointer;"
                onClick={() => {
                  outListFun(row);
                }}
              >
                添加
              </div>,
            ];
          },
          default: ({ row }) => {
            return [
              <span
                style="color: red;cursor: pointer;"
                onClick={() => outListDelFun(row)}
              >
                删除
              </span>,
            ];
          },
        },
      },
    ]
  },
]);
const answerList = ref([])
const outListFun = (data): void => {
  answerList.value.push({
    type: '',
    topic: '',
    isRight: false,
  })
  answerList.value = JSON.parse(JSON.stringify(answerList.value))
  // keyTimemin.value = new Date().getTime()
  // console.log(outList.value);
};

const outListDelFun = function (params:any): void {
  answerList.value = answerList.value.filter((val) => val.id != params.id)
};
</script>
<style scoped>
.pad_10 {
  padding: 10px;
}
.pad_10 .el-form--inline .el-form-item {
  margin: 0;
}
.el-divider--horizontal {
  margin: 10px 0;
}
</style>